<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-fileinfo-add" enctype="multipart/form-data" th:action="@{add}" method="post">
			<div class="form-group">
				<label class="col-sm-3 control-label">文件上传：</label>
				<div class="col-sm-8">
					<input id="files" name="files" class="form-control" type="file">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">文件全称：</label>
				<div class="col-sm-8">
					<input id="filename" name="filename" class="form-control" type="text" readonly="true">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">文件大小：</label>
				<div class="col-sm-8">
					<input id="filesize" name="filesize" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">文件名称：</label>
				<div class="col-sm-8">
					<input id="fsname" name="fsname" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">文件格式：</label>
				<div class="col-sm-8">
					<input id="suffix" name="suffix" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户编号：</label>
				<div class="col-sm-8">
					<input id="uid" name="uid" th:value="${uid}"  class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">用户名称：</label>
				<div class="col-sm-8">
					<input id="uname" name="uname" th:value="${uname}" class="form-control" type="text" readonly>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">地域编号：</label>
				<div class="col-sm-8">
					<input id="aid" name="aid" th:value="${aid}" class="form-control" type="text" hidden readonly>
				</div>
			</div>
			<!--因为文件上传功能隐藏的bug，故这文件时长、大小两个字段不能删掉-->
			<input id="flenth" name="flenth" class="form-control" type="hidden" readonly value="">
			<input id="fsize" name="fsize" class="form-control" type="hidden"  readonly value="">
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "village/fileinfo"

		var Upload=document.getElementById("files");
		Upload.onchange=function(){  //onchange在你选择完文件时触发
		var fileList=Upload.files ; //通过input的files属性获得fileList
		var filesnum = fileList.length;//获得文件数量
		$("#filesnum").val(filesnum);//用于传至后台进行处理
		for(let i=0;i<filesnum;i++)
		{
			var file=fileList[i];
			$("#filename").val(file.name);
			/*分隔文件名，提取文件格式*/
			var filenameArr = file.name.split(".");
			$("#fsname").val(filenameArr[0]);
			$("#suffix").val(filenameArr[1]);
			/*转化成mb单位计算*/
			var fsize = file.size / 1048576;
			/*取保存两位小数的值*/
			var fsize2 = Math.floor(fsize * 100) / 100;
			$("#filesize").val(fsize2);

		}
	}

		// 检测是否选择文件，如果选择，返回文件对象;如果没选择，返回false
		function checkFile(){
			// 获取文件对象(该对象的类型是[object FileList]，其下有个length属性)
			var fileList = $('#files')[0].files;

			// 如果文件对象的length属性为0，就是没文件
			if (fileList.length === 0) {
				console.log('没选择文件');
				return false;
			};
			return fileList[0];
		};
		function aa(){
			let  file = checkFile();
			let size = file.size / 1048576;
			var fsize2 = Math.floor(size * 100) / 100;
			console.log("文件大小",fsize2);
			//获取录音时长
			let url = URL.createObjectURL(file);
			let audioElement = new Audio(url);
			let duration = audioElement.duration/60; //音频长度 视频不行
			$("#flenth").attr("value",duration);
			$("#fsize").attr("value",fsize2);
			console.log(duration,size)
		};
		function submitHandler() {
			let  file = checkFile();
			let size = file.size / 1048576;
			var fsize2 = Math.floor(size * 100) / 100;
			/*检查当前的总空间*/
			var oldsize = 300 - [[${sizesum}]];
			var oldsize2 = Math.floor(oldsize * 100) / 100;
			var nowsize = oldsize2 - fsize2;
			if (!checkFile()) {
				alert('请先选择文件');
				return false;
			}else if(nowsize < 0)
			{
				alert("文件上传空间不足！当前文件为"+fsize2+"MB,剩余云空间为："+ oldsize2 +"MB");
				return false;
			} else {
				aa();
				$.modal.loading("正在上传中，请稍后...");
				/** 验证文件是否导入成功  */
				$("#form-fileinfo-add").ajaxSubmit(function (data) {
					$.operate.successCallback({"code": data.code, "msg": data.msg});
				});
				return false;
			}
		}
		function sleep(numberMillis) {
			var now = new Date();
			var exitTime = now.getTime() + numberMillis;
			while (true) {
				now = new Date();
				if (now.getTime() > exitTime)
					return;
			}
		}
	</script>
	<script>
		$(document).ready(function(){Dropzone.options.myAwesomeDropzone={autoProcessQueue:false,uploadMultiple:true,parallelUploads:100,maxFiles:100,init:function(){var myDropzone=this;this.element.querySelector("button[type=submit]").addEventListener("click",function(e){e.preventDefault();e.stopPropagation();myDropzone.processQueue()});this.on("sendingmultiple",function(){});this.on("successmultiple",function(files,response){});this.on("errormultiple",function(files,response){})}}});
	</script>
	<script th:src="@{/js/plugins/dropzone/dropzone.js}"></script>
	<script th:src="@{/js/jquery-form.js}"></script>
</body>
</html>
